<template>
  <Form :model="state.formData" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
    <Row>
      <Col :span="5">
        <FormItem label="盘点单号" name="">
          <Input v-model:value="state.formData.batchNo" allowClear :disabled="true" />
        </FormItem>
      </Col>
      <Col :span="5">
        <FormItem label="盘点单名称" name="" :rules="[{ required: true, message: '该项必填!' }]">
          <Input placeholder="请输入盘点单名称" v-model:value="state.formData.name" allowClear :disabled="!!id" />
        </FormItem>
      </Col>
      <Col :span="5">
        <FormItem label="创建人" name="" :rules="[{ required: true, message: '该项必填!' }]">
          <Input placeholder="请输入创建人" v-model:value="state.formData.creatorName" allowClear :disabled="!!id" />
        </FormItem>
      </Col>
      <Col :span="5">
        <FormItem label="盘点范围" name="">
          <TreeSelect
            :maxTagCount="1"
            placeholder="请选择盘点范围"
            v-model:value="state.formData.storageIds"
            :tree-data="state.storageTree"
            tree-checkable
            allow-clear
            :showCheckedStrategy="TreeSelect.SHOW_PARENT"
            :disabled="!!id"
            @change="rangeChangeFn"
          />
        </FormItem>
      </Col>
      <Col :span="5">
        <FormItem label="盘点方式" name="">
          <Select placeholder="请选择盘点方式" v-model:value="state.formData.type" :options="$dict.get('InventoryMethod')" :disabled="!!id" />
        </FormItem>
      </Col>
      <Col :span="5">
        <FormItem label="抽检方式" name="">
          <RadioGroup :disabled="state.formData.type === 4 || !!id" v-model:value="state.formData.selectType">
            <Radio :value="1">系统推荐</Radio>
            <Radio :value="2">手动选择</Radio>
          </RadioGroup>
        </FormItem>
      </Col>
    </Row>
  </Form>
</template>

<script setup lang="ts">
import { Col, Form, FormItem, Input, Radio, RadioGroup, Row, Select, TreeSelect } from 'ant-design-vue';
import { reactive, watch } from 'vue';
import { getBatchNo, getSelectAll, getSelectRandom } from '@/modules/sample-inventory/api';
import { storageTree } from '@/modules/sample_manage/api/input_manage';
import { useRoute } from 'vue-router';

const emits = defineEmits<{
  (e: 'systemRandom', list): void;
  (e: 'rangeChange', list): void;
}>();
const state: any = reactive({
  formData: {
    selectType: 2,
    type: 2,
  },
  storageTree: [],
});
const route = useRoute();
const id = route.params.id;

watch([() => state.formData.storageIds, () => state.formData.selectType, () => state.formData.type], async () => {
  if (id) return;
  if (state.formData.selectType !== 1 && state.formData.type !== 4) {
    emits('systemRandom', false);
  } else {
    let params: any = {
      storageIds: state.formData?.storageIds?.join(','),
    };
    let res;
    if (state.formData.type === 4) {
      res = await getSelectAll(params);
    } else {
      params.type = state.formData.type;
      res = await getSelectRandom(params);
    }
    emits('systemRandom', res.result);
  }
});

// range变化
const rangeChangeFn = (value) => {
  emits('rangeChange', value);
};

// 回显
const setCountData = (data) => {
  state.formData = data;
};

/**
 * 数据获取
 */
// 获取盘点单号
const getBatchNoFn = async () => {
  const res = await getBatchNo();
  state.formData.batchNo = res.result;
};
// 获取盘点范围
const getStorageTreeFn = async () => {
  const res = await storageTree();
  state.storageTree = res.result.map((item) => ({
    title: String(item.name),
    value: String(item.id),
    children: item.children.map((sub) => ({
      title: String(sub.name),
      value: String(sub.id),
    })),
  }));
};

/**
 * 初始化
 */
const init = () => {
  getBatchNoFn();
  getStorageTreeFn();
};
if (!id) {
  init();
}
defineExpose({
  countData: state.formData,
  setCountData,
});
</script>

<style lang="scss" scoped></style>
